<template>
<topaddress />
  <van-swipe-cell v-for="(item, index) in goodsinfo" :key="item.id">
    <div class="cart">
      <van-switch
        @change="tofix"
        class="btn"
        v-model="$store.getters.getcarttotal[index].selected"
        size="24px"
      />
      <div class="btn"><img :src="item.thumb_path" alt="" /></div>
      <div class="rightcontent">
        <p>{{ item.title }}</p>

        <p>
          <span class="van-submit-bar__price-integer van-submit-bar__price"
            >&yen;{{ item.sell_price }}</span
          ><van-stepper
            class="fl"
            @change="tofix"
            v-model="$store.getters.getcarttotal[index].num"
            min="1"
          />
        </p>
      </div>
    </div>
    <template #right>
      <van-button square text="删除" @click="delecart(item.id,index)" type="danger" class="delete-button" />
    </template>
  </van-swipe-cell>
  <van-submit-bar
    :price="$store.getters.carttotalPrice * 100"
    button-text="去结算"
    @submit="onSubmit"
    :style="{bottom:'2rem'}"
  >
    <template #default> 共计{{ $store.getters.getcartsum }}件 </template>
  </van-submit-bar>
</template>

<script>
import { Toast, Dialog } from "vant";
import { ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { fetchshopcarlist } from "@/API/goods.js";
import { fetchcommitorder } from "@/API/order.js";
import topaddress  from '@/components/shopcaraddress.vue';
import { genOrderId } from'@/assets/tool/tools.js'
export default {
  props:{
    back:String
  },
  setup(props) {
    const store = useStore();
    const router = useRouter();
     const checked = ref(false);
    const goodsinfo = ref([]);

    const onSubmit = async () => {
      if(store.getters.getgoods_ids.length == 0){
        return
      }
      let orderobj={
        user_id:store.state.userInfo.id,
        order_id:genOrderId(),
        address_id:JSON.parse( localStorage.getItem('addresslocal')).id,
        total_price:store.getters.carttotalPrice,
        number:store.getters.getnumber,
        // 订单出纳

        goods_ids: store.getters.getgoods_ids
        
      // 订单商品,格式："1,2"

      }
      console.log(store.getters.getgoods_ids);
      console.log(goodsinfo.value);

      let result  = await fetchcommitorder(orderobj)
      goodsinfo.value= goodsinfo.value.filter( ({ id }) => !store.getters.getgoods_ids.includes(id) )
      router.push('/order')

    store.commit('delebought') 
      // Toast(result.message)

    };
   

    return {
      onSubmit,
      checked,
      goodsinfo,
    };
  },
  components:{
    topaddress
  },

  async mounted() {
    let cars = this.$store.getters.getcarttotal
      .map((item) => item.id)
      .join(",");
      if(cars){
   let result = await fetchshopcarlist(cars);
    this.goodsinfo = result.message.reverse();
      };
 
  },
  async activated() {
    let cars = this.$store.getters.getcarttotal
      .map((item) => item.id)
      .join(",");
    if(cars){
   let result = await fetchshopcarlist(cars);
    this.goodsinfo = result.message.reverse();
      };
  },
  methods: {
    tofix() {
      this.$store.commit("chantcartstatus");
    },
    delecart(id,index){
      return new Promise((reslove)=>{
         Dialog.confirm({
              title: '确定删除吗？',
            }).then(resolve => {
              console.log(id,index)
              this.goodsinfo.splice(index,1)
              this.$store.commit('delecart',id)
            }); 
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.cart {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  img {
    width: 2rem;
  }
  .rightcontent {
    p {
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;

      /*弹性伸缩盒子模型显示*/
      display: -webkit-box;

      /*限制在一个块元素显示的文本的行数*/
      -webkit-line-clamp: 1;

      /*设置或检索伸缩盒对象的子元素的排列方式*/
      -webkit-box-orient: vertical;
      font-size: 0.7rem;
      margin-top: 0.3rem;
    }
  }
  .btn {
    flex-shrink: 0;
    margin-right: 0.7rem;
  }
}
.goods-card {
  margin: 0;
}

.delete-button {
  height: 100%;
}
</style>